<!DOCTYPE html>
利用element对员工表进行渲染 由于地址不能访问，代码不能实现不能
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	</head>
	<body>
		<div id="app">
			<h1>员工信息表</h1>
			<hr>
			<el-table v-loading="loading" :data="emps" stripe style="width: 100%">
				<el-table-column prop="no" label="编号" width="180"></el-table-column>
				<el-table-column prop="name" label="姓名" width="180"></el-table-column>
				<el-table-column prop="job" label="职位"></el-table-column>
				<el-table-column prop="sal" label="工资"></el-table-column>
				<el-table-column prop="comm" label="补贴"></el-table-column>
				<el-table-column prop="dept.name" label="所在部门"></el-table-column>
			</el-table>
			<div id="page">
				<a id="prev" @click="prevPage()">上一页</a>
				<a id="next" @click="nextPage">下一页</a>
			</div>	
		</div>
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js"></script>
		<script>
			let pageSize = 5
			const app = new Vue({
				el:'#app',
				data:{
					emps:[],
					currentPage: 1,
					totalPage: 0,
					// true表示正在加载，false表示加载完毕
					loading:true
				},
				// 从网络获取JSON数据
				created() {
					this.getEmpData()
				},
				methods:{
					getEmpData() {
						fetch('https://120.77.222.217/api/emps/',{
							// 在请求头中提供token，才能访问该IP接口
							headers:{"token":"35ad60445cea11e1000163e02b646"}
						})
						.then((response) => { return response.json() })
						.then((json) => {
							// json数据赋值
							this.emps = json.results
							this.prev = json.prev
							this.next = json.next
						})
					}
				}
			})
		</script>
	</body>
</html>
